iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0
自我挑戰組

輕鬆Vue一下系列 第 18

Day18-表格查詢

  • 分享至 

  • xImage
  •  

在前幾天示範的計算機中,複習了前面提過的事件處理、資料的雙向綁定以及資料的使用,但就是沒有條件渲染與迴圈的部分,因此這裡特別再以一個簡單的示範來讓人熟悉這部分:
首先,建立一個input並雙向綁定search,再建立一個table,然後將其內容透過row in table_info的迴圈抓取資料,並利用v-if將與搜尋編號相同之資料顯示於table中,如下:
https://ithelp.ithome.com.tw/upload/images/20191004/20112076ZcgXsUfK8v.jpg
https://ithelp.ithome.com.tw/upload/images/20191004/20112076cJDMKdYi2Y.jpg
table_info:是一個存放資料的陣列。
row:是用來在v-for中讀取table_info的變數。
最後,產生的結果如下:
(1)當輸入框中沒有輸入任何值時:
https://ithelp.ithome.com.tw/upload/images/20191004/20112076cdwgikKMfl.jpg
(2)當輸入框中輸入值存在時:
https://ithelp.ithome.com.tw/upload/images/20191004/20112076Iz8j3kuHJV.jpg
https://ithelp.ithome.com.tw/upload/images/20191004/20112076ENaHxvpP4V.jpg
(3)當輸入框中輸入值不存在時:
https://ithelp.ithome.com.tw/upload/images/20191004/20112076ZqpGvenN5f.jpg
明日預告:v-charts


上一篇
Day17-匯率計算機(事件處理)
下一篇
Day19-v-charts
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言